<template>
	<view class="completion-container" :style="{ minHeight: windowHeight + 'px' }">
		<view class="nav-bar"><view class="nav-bar-btn" @tap="skip">跳过</view></view>
		<view class="completion-head" :style="{ backgroundImage: `url(${staticFileDomain}/static/image/completion-head-normal.png)` }"></view>
		<view class="completion-body">
			<view class="completion-body-text">实名认证</view>
			<view class="completion-body-block">
				<view class="completion-body-back">Real Name Authentication</view>
				<view class="completion-body-front">
					<view class="completion-body-front-cell">
						<view class="completion-body-front-cell-label">真实姓名：</view>
						<view class="completion-body-front-cell-input">
							<!--  -->
							<input type="text" v-model="real_name" placeholder="请输入真实姓名" placeholder-class="placeholder" />
						</view>
					</view>
					<view class="nickname-roll"></view>
					<view class="completion-body-front-cell">
						<view class="completion-body-front-cell-label">身份证：</view>
						<view class="completion-body-front-cell-input">
							<!--  -->
							<input type="text" v-model="idcard" placeholder="请输入身份证号" placeholder-class="placeholder" maxlength="18" />
						</view>
					</view>
					<view class="next-btn flex-center-horizontal" @tap.stop="toNextStep">开始认证</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			default: 0,
			type: Number
		}
	},
	data() {
		return {
			windowHeight: null,
			real_name: '',
			idcard: '',
			disable: false
		};
	},
	computed: {
		regionHandler: function() {
			let regionArray = ['', ''];
			let regionText = '请选择所在地';
			let regionCode = ['', ''];
			if (this.region.city && this.region.province) {
				regionText = `${this.region.province.region_name} ${this.region.city.region_name}`;
				regionCode = [this.region.province.region_id, this.region.city.region_id];
				regionArray = [this.region.province.region_name, this.region.city.region_name];
			}
			return { regionText, regionCode, regionArray };
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		this.windowHeight = systemInfo.windowHeight;
		this.refreshUserInfo({ auto: false });
	},
	methods: {
		toNextStep() {
			if (this.idcard && this.real_name && !this.disable) {
				this.$u.api
					.submitRealNameCartication(String(this.idcard).toUpperCase(), this.real_name)
					.then(res => {
						this.refreshUserInfo({ auto: false });
						this.$emit('input', 2);
					})
					.catch(e => {
						this.disable = false;
						if (e.data.code != '201' && e.statusCode == 200) {
							this.$u.toast(e.data.msg);
						}
					});
			}
		},
		skip() {
			this.$emit('input', 2);
		}
	}
};
</script>

<style lang="scss">
.nav-bar {
	height: calc(44px + var(--status-bar-height));
	padding-top: var(--status-bar-height);
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	z-index: 21;
	display: flex;
	/* #ifndef MP */
	justify-content: flex-end;
	/* #endif */
	align-items: center;
	padding: 0 15px;
	.nav-bar-btn {
		color: #fff;
		font-size: 28rpx;
		opacity: 0.9;
	}
}
</style>
